<template>
  <div>
    <crudTable :option="option" 
               :data="data" 
               :page="page"
               :searchOptions="searchOptions"
               @onLoad="onLoad"
               @getQuery="getQuery">
      <template v-slot:ctablebottom>
        <div style="height:30px;line-height:30px;">费用总合计:{{(serviceRealityTotalCharge-0)+(goodsRealityTotalCharge-0)}}元,其中服务项目合计:{{serviceRealityTotalCharge}}元,丧葬用品合计:{{goodsRealityTotalCharge}}元</div>
      </template>
    </crudTable>
  </div>
</template>

<script>
import crudTable from '@/components/CrudTable'
import { chargeTypeStatisticsTable } from '@/api/bussines'
export default {
  components:{
    crudTable,//增删改查表
  },
  data(){
    return{
      serviceRealityTotalCharge:0,//服务项目总金额
      goodsRealityTotalCharge:0,//丧葬用品总金额
      query:{},
      //搜索框配置项
      searchOptions:{
        clearBtn:false,
        items:[
          {
            type:'times',
            key:['settleStartTime','settleEndTime'],
            label:'结算时间'
          },
          {
            type:'select',
            key:'asBasicService',
            label:'收费性质',
            dicData:[{
              val:'0',
              desc:'基础'
            },{
              val:'1',
              desc:'延伸'
            }]
          },
        ]
      },
      //表格数据
      data: [],
      //表格配置选项
      option:{
        isDefaultQuery:true,
        isSearch:false,
        excelBtn:true,//是否展示Excel按钮
        excelUrl:'api/search/load-charge-type-statistics-table-export-excel',//Excel的下载Url
        excelName:"收费类型统计_",//excel的文件名
        height:580,//是否设置高度（超出会显示滚动条）
        isIndex:true,//是否需要索引项
        //表格项配置
        items:[
          {
            key:'itemName',
            label:'项目名称',
            align:'center',
          },
          {
            key:'itemNumber',
            label:'数量',
            align:'center',
          },
          {
            key:'realityCharge',
            label:'实收金额',
            align:'center',
          },
        ]
      },
      //分页数据
      page:{
        pageSize: 20,//默认页码大小
        total: 0,//总数
        currentPage: 1//当前页
      },
    }
  },
  watch:{
    'query.asOutsideDriver':function(n){
      this.searchOptions.items[2].dicData=[]
      driverType({as0utsideDriver:n}).then(res=>{
        let tmpArr=res.data
        tmpArr.map(el=>{
          this.searchOptions.items[2].dicData.push({desc:el.fullName,val:el.fullName})
        })
      })
    },
    'data':{
      handler(n){
        console.log(n)
        if(n.length){
          this.allCost=n[0].totalCost
        }else{
          this.allCost=0
        }
      },
      deep:true
    },
  },
  methods:{
    //获取参数
    getQuery(query){
      this.query=query
    },
    //页面加载事件
    onLoad({page,query}){
      let params={
        ...query
      }
      chargeTypeStatisticsTable(params).then(res=>{
        let {chargeItemViewItems,goodsRealityTotalCharge,serviceRealityTotalCharge}=res.data
        this.data=chargeItemViewItems
        this.goodsRealityTotalCharge=goodsRealityTotalCharge
        this.serviceRealityTotalCharge=serviceRealityTotalCharge
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
